<template>
  <div class="login">
    <div class="login-header">
      <div class="headPortrait">
        <div class="portraitImg">
          <van-image
            round
            width="67px"
            height="67px"
            src="../../../img/头像.png"
          />
          <div class="loginButton" @click="OnLogin">立刻登录</div>
        </div>
      </div>
    </div>
    <div class="myProperty">
      <div class="maizuojuan">
        <div class="maizuojuanNumber">0张</div>
        <div class="maizuojuanTest">卖座劵</div>
      </div>
      <div class="money">
        <div class="moneyNumber">￥0</div>
        <div class="yue">余额</div>
      </div>
    </div>
    <div class="Card">
      <van-cell is-link>
        <van-icon name="coupon" color="yellow" size="20" />
        <span class="cardText">电影订单</span>
      </van-cell>
      <van-cell is-link>
        <van-icon name="gold-coin-o" color="red" size="20" />
        <span class="cardText">组合与红包</span>
      </van-cell>
      <van-cell is-link>
        <van-icon name="service-o" color="blue" size="20" />
        <span class="cardText">帮助与客服</span>
      </van-cell>
      <van-cell is-link>
        <van-icon name="setting-o" color="yellowgreen" size="20" />
        <span class="cardText">设置</span>
      </van-cell>
    </div>
  </div>
</template>
<script>
export default {
  name: "home-center",
};
</script>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

function OnLogin() {
  console.log("正在登录...");
  router.push("login");
}
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  background-color: #f4f4f4;

  &-header {
    height: 136px;
    background: url("../../../img/loginBackground.png") no-repeat;
    background-size: cover;
    padding-top: 64px;
    padding-left: 22px;
    .portraitImg {
      display: flex;
      align-items: center;

      .loginButton {
        margin-left: 22px;
        color: white;
      }
    }
  }
  .myProperty {
    height: 79px;
    display: flex;
    text-align: center;
    align-items: center;
    background-color: white;
    .maizuojuan {
      width: 50%;
    }
    .money {
      width: 50%;
    }
    .maizuojuanTest,
    .yue {
      font-size: 13px;
      color: #797d82;
    }
  }
  .Card {
    margin-top: 15px;
  }
  .cardText {
    margin-left: 15px;
    color: #191a1b;
    font-size: 15px;
  }
}
</style>
